<template>
  <view>
    <view style="display: flex; justify-content: center; margin: 20rpx 0">
      <view style="width: 50%">
        <uni-segmented-control
          :current="current"
          :values="items"
          :style-type="styleType"
          :active-color="activeColor"
          @clickItem="onClickItem"
        />
      </view>
    </view>
    <view v-if="current === 0">
      <view class="form">
        <!-- 表单内容 -->
        <view class="form-content">
          <view class="form-item" @click="handleTap">
            <text class="label" style="color: red">*</text>
            <text class="label">危废行业俗称:</text>
            <text class="iptClass" v-if="profile.wfTypeName">{{
              profile.wfTypeName
            }}</text>
            <text class="dianwo" v-else>请选择危废行业俗称</text>
          </view>
          <view class="form-item" @click="handleDep">
            <text class="label">所属部门:</text>
            <text class="iptClass" v-if="profile.deptName">{{
              profile.deptName
            }}</text>
            <text class="dianwo" v-else>请选择所属部门</text>
          </view>
          <view class="form-item" @click="handledate">
            <text class="label" style="color: red">*</text>
            <text class="label">预计转移时间:</text>
            <text class="iptClass" v-if="profile.planTransTime">{{
              profile.planTransTime
            }}</text>
            <text class="dianwo" v-else>请选择当天及以后的日期</text>
          </view>
          <view class="form-item" @click="handlezhuanyun">
            <text class="label" style="color: red">*</text>
            <text class="label">转运危废</text>
            <text class="dianwo" v-if="!profile.wfIds">请选择转运危废</text>
          </view>
          <!-- <view class="form-item">
            <text class="label">转移总量</text>
            <text class="iptClass">{{ profile.wfTransWeight }}</text>
          </view>
          <view class="form-item">
            <text class="label">单位</text>
            <text class="iptClass">{{ profile.wfUnit }}</text>
          </view> -->

          <view class="form-item">
            <text class="label" style="color: red">*</text>
            <text class="label">去向:</text>
            <input
              class="iptClass"
              placeholder="请输入去向"
              type="text"
              v-model.trim="profile.transTo"
            />
          </view>
          <ImageLogic
            :picturesPath="picturesPath"
            :isRequired="true"
          ></ImageLogic>
          <view class="form-item">
            <text class="label">备注:</text>
            <input
              class="iptClass"
              placeholder="请输入备注"
              type="text"
              v-model.trim="profile.remark"
            />
          </view>
          <view class="form-item lastView">
            <text class="label">申请人:</text>
            <input
              class="iptClass"
              type="text"
              v-model.trim="memberStore.userName"
              disabled
            />
          </view>
        </view>
      </view>
    </view>
    <view v-if="current === 1">
      <view
        class="overClass"
        v-if="memberStore.stateTable.rows.length"
        style="height: 78vh"
      >
        <view v-for="item in memberStore.stateTable.rows" :key="item.id">
          <view class="wrapBox">
            <view class="smallBox">
              <text class="maxwidth"> 危废行业俗称:{{ item.wfTypeName }} </text>
              <text> 容器/包装类型:{{ item.wfContainerType }} </text>
            </view>
            <view class="smallBox">
              <text> 产出日期:{{ item.create_Time }} </text>
              <text> 登记人:{{ item.registrant }} </text>
            </view>
            <view class="smallBox">
              <!-- <text> 名称:{{ item.wfName }} </text> -->
              <text> 去向:{{ item.wfTo }} </text>
            </view>
            <!-- <view class="smallBox">
              <text> 单位:{{ item.wfUnit }} </text>
              <text> 产出量:{{ item.wfWeight }} </text>
            </view> -->
            <!-- <view class="smallBox">
              <text> 废物类别:{{ item.wfTypeCode }} </text>
              <text> 危废代码:{{ item.wfCreateCode }} </text>
            </view> -->
          </view>
        </view>
      </view>
      <view class="wuClass" v-else>
        <view>暂无数据</view>
      </view>
    </view>
    <!-- 提交按钮 -->
    <view class="flexClass">
      <button
        @tap="onSubmit(4)"
        class="form-button"
        style="margin-right: 20rpx"
        :disabled="disabled1"
        :loading="disabled1"
      >
        保存并退出
      </button>
      <button
        @tap="onSubmit(1)"
        :disabled="disabled2"
        :loading="disabled2"
        class="form-button"
      >
        保存并提交
      </button>
    </view>
    <view class="editApplication">
      <l-popup :radius="20" :show="popupShow">
        <view>
          <WasteCategories
            v-if="popupShow && componentName == 'WasteCategories'"
            :wfType="`${profile.wfType}`"
            @close="close"
            :flag="true"
          ></WasteCategories>
          <depLists
            v-if="popupShow && componentName == 'depLists'"
            @close="close"
            :deptId="profile.applyDeptId"
          ></depLists>
        </view>
      </l-popup>
    </view>
  </view>
</template>

<script setup>
import { useMemberStore } from "@/stores/modules/member";
import { getCurrentTime, currentDate } from "@/utils";
import { update_register_status, wfTransApplysaveOrUpdate } from "@/commonApi";
const props = defineProps(["from"]);
const disabled1 = ref(false);
const disabled2 = ref(false);
const memberStore = useMemberStore();
const profile = reactive({});
const current = ref(0);
const items = ref(["基本信息", "转运详情"]);
const styleType = ref("button");
const activeColor = ref("#007aff");
const picturesPath = ref([]);
const popupShow = ref(false);
const componentName = ref("");
const handleTap = () => {
  popupShow.value = true;
  componentName.value = "WasteCategories";
};
const handleDep = () => {
  if (memberStore.deptMap.length > 1) {
    popupShow.value = true;
    componentName.value = "depLists";
  }
};

const handledate = () => {
  dd.datePicker({
    format: "yyyy-MM-dd",
    success: (res) => {
      profile.planTransTime = res.date.replaceAll("/", "-");
      if (new Date(profile.planTransTime).getTime() < currentDate()) {
        profile.planTransTime = "";
        uni.showToast({
          icon: "none",
          title: "请选择当天及以后的日期",
        });
      }
    },
    fail: (err) => {},
  });
};
onLoad(() => {
  memberStore.typeAndDep = {};
  memberStore.stateTable.rows = [];
  if (memberStore.deptMap.length == 1) {
    profile.applyDeptId = memberStore.deptMap[0].deptId;
    profile.deptName = memberStore.deptMap[0].name;
  }
});
const close = () => {
  popupShow.value = false;
  if (componentName.value == "WasteCategories") {
    profile.wfTypeName = memberStore.typeAndDep.wfTypeName;
    profile.wfType = memberStore.typeAndDep.id;
  } else {
    profile.applyDeptId = memberStore.typeAndDep.deptId;
    profile.deptName = memberStore.typeAndDep.name;
  }
};
onShow(() => {
  if (memberStore.stateTable.rows.length) {
    profile.wfIds = memberStore.stateTable.rows.map((item) => item.id).join();
    profile.wfUnit = memberStore.stateTable.rows[0].wfUnit;
    console.log(memberStore.stateTable.rows, 456000000000);
    // profile.wfTransWeight = memberStore.stateTable.rows.reduce((pre, next) => {
    //   return pre + next.wfWeight;
    // }, 0);
  }
});

// 点击保存提交表单
const onSubmit = async (transStatus) => {
  if (!profile.wfTypeName) {
    return uni.showToast({
      icon: "none",
      title: "危废行业俗称不能为空",
    });
  }
  if (!profile.planTransTime) {
    return uni.showToast({
      icon: "none",
      title: "转移时间不能为空",
    });
  }
  if (!profile.wfIds) {
    return uni.showToast({
      icon: "none",
      title: "转运危废不能为空",
    });
  }
  if (!profile.transTo) {
    return uni.showToast({
      icon: "none",
      title: "去向不能为空",
    });
  }
  if (!picturesPath.value.length) {
    return uni.showToast({
      icon: "none",
      title: "上传附件不能为空",
    });
  }
  const wfTypeNames = profile.wfTypeName.split(",");
  const names = wfTypeNames.reduce((pre, wfTypeName) => {
    const flag = memberStore.stateTable.rows.find(
      (list) => list.wfTypeName == wfTypeName
    );
    if (!flag) {
      pre.push(wfTypeName);
    }
    return pre;
  }, []);
  console.log(names, 99999);
  if (names.length) {
    return uni.showToast({
      icon: "none",
      title: `请删除危废行业俗称中的’${names.join(",")}‘`,
      duration: 3000,
    });
  }
  profile.transStatus = transStatus;
  profile.applyUserId = memberStore.userId;
  profile.submitTime = getCurrentTime();
  profile.picture = JSON.stringify(picturesPath.value);
  try {
    if (transStatus == 4) {
      disabled1.value = true;
    } else {
      disabled2.value = true;
    }
    await wfTransApplysaveOrUpdate(profile);
    await update_register_status(profile.wfIds, transStatus == 4 ? 4 : 2);
    uni.showToast({ icon: "success", title: "操作成功" });
    setTimeout(() => {
      if (transStatus == 4) {
        if (props.from == "TransitApplication") {
          uni.navigateBack();
        } else {
          uni.navigateTo({
            url: `/pages/MyApplication/MyApplication`,
          });
        }
      } else {
        if (props.from == "TransitApplication") {
          uni.navigateBack();
        } else {
          uni.switchTab({
            url: `/pages/index/index`,
          });
        }
      }
    }, 400);
  } finally {
    if (transStatus == 4) {
      disabled1.value = false;
    } else {
      disabled2.value = false;
    }
  }
};
const handlezhuanyun = () => {
  if (profile.wfTypeName && profile.deptName) {
    uni.navigateTo({
      url: `/pages/wasteRegistration/wasteRegistration?wftype=${profile.wfType}&applyDeptId=${profile.applyDeptId}`,
    });
  } else {
    uni.showToast({
      icon: "none",
      title: "请选择危废行业俗称和所属部门",
    });
  }
};
const onClickItem = (e) => {
  if (current.value !== e.currentIndex) {
    current.value = e.currentIndex;
  }
};
</script>

<style lang="scss" scoped>
.form {
  background-color: #f4f4f4;
  .form-content {
    height: 78vh;
    overflow-y: auto;
  }
  &-content {
    margin: 20rpx 20rpx 0;
    padding: 0 20rpx;
    border-radius: 10rpx;
    background-color: #fff;
  }

  &-item {
    display: flex;
    height: 96rpx;
    line-height: 46rpx;
    padding: 25rpx 10rpx;
    background-color: #fff;
    font-size: 28rpx;
    border-bottom: 1rpx solid #ddd;

    .label {
      // width: 180rpx;
      white-space: nowrap;
      padding-right: 5rpx;
      color: #333;
    }

    .account {
      color: #666;
    }

    .input {
      flex: 1;
      display: block;
      height: 46rpx;
    }

    .radio {
      margin-right: 20rpx;
    }

    .picker {
      flex: 1;
    }
    .placeholder {
      color: #808080;
    }
  }
}

.flexClass {
  display: flex;
  justify-content: center;
  padding-top: 30rpx;
  .form-button {
    width: 40%;
    background-color: rgb(0, 122, 255);
    border-radius: 10rpx;
    color: white;
  }
}

.wuClass {
  height: 78vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: rgb(0, 122, 255);
  // font-size: 40rpx;
}
.lastView {
  border-bottom: 1rpx solid #ddd;
}
</style>

